import React, { Component } from 'react';
import { Carousel, Image } from 'antd';
import { withRouter  } from 'react-router-dom';
import Http from '../../util/http';
import './index.less';

class Wcarousel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            bannersMap: [],
        }
    }

    render() {
        return (
            <div className='home-header'>
                <Carousel autoplay>
                    {this.state.bannersMap.map( (item, index) => {
                        return ( <div key={index} data-novelid={item.novelId} onClick={this.Jump.bind(this, item.novelId)}>
                            <Image className={'wind-banner'} src={item.url} preview={false}  fallback={'http://image.hanlingsha.love/lwa/novel/lwa-default-novel-cover.jpeg'} />
                        </div> );
                    })}
                    
                    {/* <div>
                        <img className={"wind-banner"} src={require("../../assets/img/man2.jpg")} alt=""/>
                    </div>
                    <div>
                        <img className={"wind-banner"} src={require("../../assets/img/man2.jpg")} alt=""/>
                    </div> */}
                </Carousel>
            </div>
        );
    }

    UNSAFE_componentWillMount() {

    }

    componentDidMount() {
        this.getBanners();
    }

    getBanners() {
        Http.get('/Essence/getBanner').then( res => {
            this.setState({bannersMap: res.resultData});
        });
    }

    Jump(novelId) {
        this.props.history.push({pathname: '/details' , state: {
            novelId,
        }});
    }

}
export default withRouter(Wcarousel);


